<template>
  <div class="g-con container">
    <el-card class="box-card">
      <div
        slot="header"
        class="clearfix card-header"
      >
        <span class="flexsc">{{ t('organizationStructure.OStructure.t1') }}</span>
        <template v-if="isAdmin">
          <span>
            <el-button
              @click="handleUserAdd"
              type="primary"
            >
              {{ t('organizationStructure.OStructure.b1') }}
            </el-button>
          </span>
          <span>
            <el-button
              @click="roleAddDialog = true"
              type="primary"
            >
              {{ t('organizationStructure.OStructure.b2') }}
            </el-button>
          </span>
        </template>
      </div>
      <el-divider></el-divider>

      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="userName"
          :label="t('organizationStructure.OStructure.l1')"
        >
        </el-table-column>
        <el-table-column
          prop="userNo"
          :label="t('organizationStructure.OStructure.l2')"
        >
        </el-table-column>
        <el-table-column
          prop="email"
          :label="t('organizationStructure.OStructure.l3')"
        >
        </el-table-column>
        <el-table-column :label="t('organizationStructure.OStructure.l4')">
          <template #default> ****** </template>
        </el-table-column>
        <el-table-column
          prop="customerRoleName"
          :label="t('organizationStructure.OStructure.l5')"
        >
        </el-table-column>
        <el-table-column
          :label="t('organizationStructure.OStructure.l6')"
          width="300px"
        >
          <template #default="scoped">
            <el-button
              v-if="storeLogin.userInfo.id === scoped.row.id||storeLogin.userInfo.isAdmin === '1'"
              link
              size="small"
              style="color: rgba(51, 118, 229, 1)"
              @click="editFn(scoped.row)"
              >{{ t('organizationStructure.OStructure.a1') }}</el-button
            >
            <el-popconfirm
              v-if="storeLogin.userInfo.isAdmin === '1'"
              :title="t('organizationStructure.OStructure.a2_1')"
              @confirm="movingEnterpriseFn(scoped.row)"
            >
              <template #reference>
                <el-button
                  v-if="scoped.row.isAdmin !== '1'"
                  link
                  size="small"
                  style="color: rgba(202, 42, 2, 1)"
                  >{{ t('organizationStructure.OStructure.a2') }}</el-button
                >
              </template>
            </el-popconfirm>
            <el-popconfirm
              v-if="storeLogin.userInfo.isAdmin === '1'"
              :title="t('organizationStructure.OStructure.a3_1')"
              @confirm="transferAdminFn(scoped.row)"
            >
              <template #reference>
                <el-button
                  v-if="scoped.row.isAdmin !== '1'"
                  link
                  size="small"
                  style="color: rgba(51, 118, 229, 1)"
                  >{{ t('organizationStructure.OStructure.a3') }}</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新增用户 -->
    <UserAdd
      v-if="userAddDialog"
      v-model="userAddDialog"
      :dialogType="dialogType"
      :editId="editId"
      @getList="getList"
    />

    <!-- 职务 -->
    <RoleAdd
      v-if="roleAddDialog"
      v-model="roleAddDialog"
    />
  </div>
</template>
<script setup>
import { onBeforeMount, onMounted, ref, watch, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { getCustomerList, movingEnterprise, transferAdmin } from '@/service/organizationStructure'
import useDict from '@/hooks/useDict'
import useLogin from '@/stores/login'
const storeLogin = useLogin()

import RoleAdd from './RoleAdd.vue'
import UserAdd from './UserAdd.vue'

const { dictData, getDictData } = useDict()
const { t, locale } = useI18n()
watch(locale, () => {
  init()
})

onBeforeMount(() => {
  init()
})

// 是否是管理员
const isAdmin = computed(() => {
  return storeLogin?.userInfo?.isAdmin === '1'
})

//移除企业
const movingEnterpriseFn = ({ id }) => {
  movingEnterprise({ id }).then(({ msg }) => {
    ElMessage.success(msg)
    getList()
  })
}
//转移管理员
const transferAdminFn = ({ id }) => {
  transferAdmin({ id }).then(({ msg }) => {
    ElMessage.success(msg)
    getList()
    window.loginCallBack = getList
  })
}

// 编辑职务
const roleAddDialog = ref(false)
const dialogType = ref('add')

// 新增用户 弹窗
const userAddDialog = ref(false)
const handleUserAdd = () => {
  userAddDialog.value = true
  dialogType.value = 'add'
}

//编辑
const editId = ref(null)
const editFn = (row) => {
  editId.value = row.id
  dialogType.value = 'edit'
  userAddDialog.value = true
}

// 用户列表
const tableData = ref([])
const getList = () => {
  getCustomerList({
    enterpriseId: storeLogin.userInfo.enterpriseId
  }).then((res) => {
    res.rows.forEach(item=>{
      if(item.isAdmin === '1'){
        item.customerRoleName = t('organizationStructure.OStructure.roleName')
      }
    })
    tableData.value = res.rows
  })
}

const init = () => {
  getList()
}
</script>
<style lang="scss" scoped>
.container {
  padding: 18px 20px;
  background: white;
  min-height: 536px;

  .card-header {
    display: flex;

    span:first-child {
      flex: 8;
    }

    button {
      min-width: 100px;
      padding: 0 12px;
      height: 34px;
      margin-right: 12px;
    }
  }
}

.divider {
  width: 100%;
  height: 3px;
  background: black;
  margin-bottom: 36px;
}
</style>
